import React, { useEffect, useRef, useState } from 'react'
import style from './remtab.module.css'
import TabsData, { TabData } from "../compoents/Tabs/TabsData";
function RemTab() {

    // tab切换
    const [activeTab, setActiveTab] = useState<string>(TabsData[0].id);
    const [isExpanded, setIsExpanded] = useState<boolean>(false);
    const containerRef = useRef<HTMLDivElement>(null);
    const [tabsPerRow, setTabsPerRow] = useState<number>(4);

    useEffect(() => {
        const calculateTabsPerRow = () => {
            if (containerRef.current) {
                const containerWidth = containerRef.current.offsetWidth;
                const tabWidth = 100; // 假设每个 Tab 按钮的宽度为 120px
                setTabsPerRow(Math.floor(containerWidth / tabWidth));
            }
        };

        calculateTabsPerRow();
        window.addEventListener("resize", calculateTabsPerRow);
        return () => window.removeEventListener("resize", calculateTabsPerRow);
    }, []);

    const visibleTabs = isExpanded ? TabsData : TabsData.slice(0, tabsPerRow);
    const handleTabClick = (tabId: string) => {
        setActiveTab(tabId);
    };

    const handleExpandClick = () => {
        setIsExpanded(!isExpanded);
    };
    return (
        <div>
            <div className={style.main2} ref={containerRef}>
                <div className={style.main_item}>
                    {visibleTabs.map((tab: TabData) => (
                        <button
                            key={tab.id}
                            className={style.but1}
                            onClick={() => handleTabClick(tab.id)}
                            style={{
                                fontWeight: activeTab === tab.id ? "900" : "normal",
                                fontSize: activeTab === tab.id ? "16px" : "14px",
                            }}
                        >
                            {tab.label}
                        </button>
                    ))}
                    <button
                        onClick={handleExpandClick}
                        style={{
                            position: "absolute",
                            top: "0",
                            right: "0",
                            padding: "8px 16px",
                            margin: "2px",
                            backgroundColor: "transparent",
                            color: "#ccc",
                            border: "none",
                            cursor: "pointer",
                            fontSize: "18px",
                        }}
                    >
                        {isExpanded ? "︽" : "︾"}
                    </button>
                </div>
                <div className={style.nr}>
                    {TabsData.map((tab: TabData) => (
                        <div
                            key={tab.id}
                            style={{
                                display: activeTab === tab.id ? "block" : "none",
                                width: "1265px",
                                // height: "850px",
                                background: "#fff",
                                padding: "5px",
                            }}
                        >
                            {tab.content}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default RemTab